// 函数组件的类型的是FC
import { FC, useState, useEffect, ChangeEvent } from 'react';
import Child from './components/Child';

const Index: FC = () => {
  // useState的变量的类型要用泛型
  const [count, setCount] = useState<number>(3);
  const [text, setText] = useState<string>('');

  // 函数如果没有返回值，void表示类型
  const fn = (n: number): void => {
    setCount(n);
  };

  useEffect(() => {
    const a: number = 123;
    console.log(a);
  }, []);

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

  const handleClick = (): void => {
    console.log(text);
  };

  return (
    <>
      <h2>typescript页面</h2>
      <p>{count}</p>
      <button onClick={() => fn(10)}>btn</button>

      <hr />

      <Child name="zhangsan" onFn={fn} />

      <hr />

      <input type="text" value={text} onChange={handleChange} />
      <button onClick={handleClick}>btn</button>
    </>
  );
};

export default Index;
